<template>
    <div>
        <ul class="types">
            <li :class="value==='-'&& 'selected'" @click="selectedType('-')">支出</li>
            <li :class="value==='+'&& 'selected'" @click="selectedType('+')">收入</li>
        </ul>
    </div>
</template>

<script lang="ts">
// export default {
//     name:'Types',
//     data() {
//     return {
//         type:'-'
//     }
//   },
//   methods: {
//     selectedType(type){
//         if(type !=='+'&&type !=='-'){
//             throw new Error('type is unknown')
//         }
//         this.type = type
//     }
//   },
// }
import Vue from 'vue';
import {Component,Prop} from 'vue-property-decorator';
@Component
export default class Types extends Vue{

    // 传入一个默认值
    @Prop({default:'-'}) readonly value!:string;
    selectedType(type:string){//给type添加类型
        if(type !=='+'&&type !=='-'){
            throw new Error('type is unknown')
        }
        this.$emit('update:value',type)
    }
}


</script>

<style lang="scss" scoped>
@import "~@/assets/styles/helper.scss";
.types{
    background: #c4c4c4;
    display: flex;
    text-align: center;
    font-size: 24px;
    > li{
        width: 50%;
        height: 64px;
        line-height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        position: relative;
        &.selected::after{
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 4px;
            background: #333;
            }
        
    }
}
</style>